ExtJS Routing System হল একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরির সময় রাউটিং এবং নেভিগেশন পরিচালনা করতে ব্যবহৃত হয়। রাউটিং সিস্টেমের মাধ্যমে, আপনি URL এর ভিত্তিতে বিভিন্ন ভিউ (views) এবং কম্পোনেন্ট (components) অ্যাক্সেস করতে পারেন, যেমন প্রথাগত ওয়েব অ্যাপ্লিকেশনগুলিতে বিভিন্ন পেজের মধ্যে নেভিগেট করা হয়। ExtJS তে রাউটিং ব্যবহার করে, অ্যাপ্লিকেশনটি ক্লায়েন্ট-সাইডে এক পেজে চলতে থাকে এবং ডেটা বা ভিউ পরিবর্তন হয়, কিন্তু URL ঠিকানা পরিবর্তিত হয়, যা ইউজারের অভিজ্ঞতাকে আরও উন্নত করে।
Routing System হল একটি মেকানিজম যা ইউআরএল এর ভিত্তিতে অ্যাপ্লিকেশন ভিউ এবং স্টেট পরিবর্তন করে। এটি ব্যবহারকারীর ইউআরএল চেঞ্জ (যেমন: পেজ পরিবর্তন) ট্র্যাক করে এবং পেজ লোড করার পরিবর্তে উপযুক্ত ভিউ বা কম্পোনেন্ট রেন্ডার করে। ExtJS তে, রাউটিং সিস্টেম অ্যাপ্লিকেশন স্টেট এবং ভিউয়ের মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করতে সহায়ক।
ExtJS তে Routing ব্যবহারের জন্য Ext.util.History
এবং Ext.Router
(Sencha Cmd এর মাধ্যমে) ব্যবহৃত হয়। এখানে, Ext.util.History
কম্পোনেন্ট ব্রাউজারের ইতিহাস এবং Ext.Router
রাউটিং সিস্টেমের জন্য ব্যবহৃত হয়।
Ext.util.History
ব্যবহার করে আপনি URL এর ইতিহাস ট্র্যাক এবং ব্রাউজারের 'back' এবং 'forward' অ্যাকশনগুলি ম্যানেজ করতে পারেন।
History ব্যবহারের উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'ExtJS Routing Example',
width: 600,
height: 400,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Go to Page 1',
handler: function() {
Ext.util.History.add('page1');
}
},
{
xtype: 'button',
text: 'Go to Page 2',
handler: function() {
Ext.util.History.add('page2');
}
}
]
});
// History listener setup
Ext.util.History.on('change', function(token) {
if (token === 'page1') {
console.log('Navigated to Page 1');
} else if (token === 'page2') {
console.log('Navigated to Page 2');
}
});
// Enable history
Ext.util.History.init();
Ext.util.History.add
: এটি নতুন ইউআরএল টোকেন (যেমন: 'page1', 'page2') ব্রাউজারের ইতিহাসে যোগ করে।Ext.util.History.on
: ইতিহাসে পরিবর্তন ঘটলে, এটি একটি ইভেন্ট ট্রিগার করে, যেখানে নির্দিষ্ট ভিউ বা কম্পোনেন্ট রেন্ডার করা যেতে পারে।Ext.Router
একাধিক রাউটিং প্যাটার্নের জন্য URL এবং কম্পোনেন্ট সংযুক্ত করে।
Ext.Router এর উদাহরণ:
Ext.application({
name: 'MyApp',
launch: function() {
// Define routes
Ext.Router.on({
'home': function() {
console.log('Home Page');
},
'user/:id': function(id) {
console.log('User Page with ID: ' + id);
}
});
// Activate router
Ext.Router.redirect('home');
}
});
Ext.Router.on
: এটি একটি রাউট প্যাটার্ন তৈরি করে, যেমন home
এবং user/:id
। :id
একটি প্যারামিটার যা ইউআরএল থেকে পাঠানো হয়।Ext.Router.redirect
: এটি একটি নির্দিষ্ট রাউটে নেভিগেট করে, যেমন home
।user/:id
প্যারামিটার ব্যবহার করা হয়।ExtJS Routing System এর মাধ্যমে আপনি ক্লায়েন্ট-সাইড রাউটিং এবং নেভিগেশন পরিচালনা করতে পারেন। এটি Single Page Applications (SPA) তৈরি করতে সহায়ক এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Ext.util.History
এবং Ext.Router
টুলস দিয়ে আপনি URL এর মাধ্যমে বিভিন্ন ভিউ এবং কম্পোনেন্ট রেন্ডার করতে পারেন, যা ডেটা বা ইউআরএল চেঞ্জের সাথে সিঙ্ক্রোনাইজেশন নিশ্চিত করে। ExtJS এর রাউটিং সিস্টেম সাশ্রয়ী এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।
Read more